<template>
  <el-dialog
    v-model="model"
    :title="title"
    width="800px"
    :show-close="false"
    custom-class="detail-dialog"
  >
    <el-descriptions 
      :column="line" 
      border
      size="large"
      class="detail-content"
    >
      <el-descriptions-item 
        v-for="(column, key) in columnData" 
        :key="key"
        :label="column.label"
      >
        {{ showDesc(column) || '-' }}
      </el-descriptions-item>
    </el-descriptions>
    
    <template #footer>
      <el-button type="primary" @click="model = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang='ts'>
const model = defineModel()
const props = defineProps({
  value: {
    type: Boolean,
  },
  rowData: {
    type: Object,
  },
  dictsMapping: {
    type: Object,
  },
  dicts: {
    type: Object,
  },
  columnData: {
    type: Array,
  },
  title: {
    type: String,
    default: '详细信息'
  },
  line: {
    type: Number,
    default: 2
  },

})

const showDesc = (column) => {
  const keys = Object.keys(props.dictsMapping)
  if (keys.includes(column.prop)) {    
    const dict = props.dicts[props.dictsMapping[column.prop]].value
    console.log(column.prop, dict);
    const findDic = dict.find(item => item.value == props.rowData[column.prop])
    return findDic ? findDic.label : props.rowData[column.prop]
  }
  return props.rowData[column.prop]
}
</script>

<style scoped lang='scss'>

</style>